<section class="content-header" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
         xmlns:th="http://www.thymeleaf.org">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">客户管理crm</a></li>
        <li class="active">流失客户</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="custName">用户名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="custName">

                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="custLevel">客户等级:</label>
                    <div class="col-xs-8">
                        <!--                        <input type="text" class="form-control" id="custLevel">-->
                        <select name="custLevel" id="custLevel" class="form-control m-b">
                            <option  value="0">所有客户</option>
                            <option  value="1">新客</option>
                            <option  value="2">熟客</option>
                            <option  value="3">老客</option>
                            <option  value="4">会员</option>
                            <option  value="5">大会员</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4" for="custStatus">客户状态:</label>
                    <div class="col-xs-8">
                        <select name="custStatus" id="custStatus" class="form-control m-b">
                            <option  value="3">所有客户</option>
                            <option  value="4">无单客户</option>
                            <option  value="5">有单客户</option>
                        </select>
                    </div>
                </div>
                <shiro:hasPermission name="customer2:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">

            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>

        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 用户新增模态框 -->
<div id="userModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="CustomerForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户名 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="custName" class="form-control" min="3" require="必填项" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户地区 :<span style="color: #ff0000">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="custRegion" type="text" class="form-control" min="3" require="必填项"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户经理编号 :</label>

                            <div class="col-sm-8">
                                <input name="custManangerId" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户经理姓名 :</label>

                            <div class="col-sm-8">
                                <input name="custManangerName" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户等级 :<span style="color: #ff0000">*</span>:</label></label>

                            <div class="col-sm-8">
                                <select name="custLevel" id="custLevel2" class="form-control m-b" >
                                    <option  value="1">新客</option>
                                    <option  value="2">熟客</option>
                                    <option  value="3">老客</option>
                                    <option  value="4">会员</option>
                                    <option  value="5">大会员</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户等级描述 :</label>

                            <div class="col-sm-8">
                                <input name="custLevelLabel" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户满意度 :</label>

                            <div class="col-sm-8">
                                <select name="custSatisfy" id="custSatisfy" class="form-control m-b">
                                    <option  value="1">1</option>
                                    <option  value="2">2</option>
                                    <option  value="3">3</option>
                                    <option  value="4">4</option>
                                    <option  value="5">5</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户信用度 :</label>

                            <div class="col-sm-8">
                                <select name="custCredit" id="custCredit" class="form-control m-b">
                                    <option  value="1">1</option>
                                    <option  value="2">2</option>
                                    <option  value="3">3</option>
                                    <option  value="4">4</option>
                                    <option  value="5">5</option>
                                    <option  value="6">6</option>
                                    <option  value="7">7</option>
                                    <option  value="8">8</option>
                                    <option  value="9">9</option>
                                    <option  value="10">10</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户地址 :</label>

                            <div class="col-sm-8">
                                <input name="custAddress" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户邮政编码 :</label>

                            <div class="col-sm-8">
                                <input name="custZip" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户电话 :</label>
                            <div class="col-sm-8">
                                <input name="custTel" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户状态 :<span style="color: #ff0000">*</span>:</label></label>
                            <div class="col-sm-8">
                                <select name="custStatus" id="custStatus2" class="form-control m-b">
                                    <option  value="1">目标用户</option>
                                    <option  value="2">流失用户</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单 :</label>
                            <div class="col-sm-8">
                                <input name="custOrderNum" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveCustomer" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 用户详情模态框 -->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var editFlag = "[[${@perms.hasPerm('customer2:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('customer2:delete')}]]";
    // var assignRoleFlag="[[${@perms.hasPerm('customer2:assignRole')}]]";
    var custIdStr;//批量用户id
    var roleIdStr;//分配的角色
    var selectRoleIds;
    var customerIdChecked;
    var loadRoleCount = 0;
    var columns = [
        {checkbox: true},
        {
            field: 'custName',
            title: '用户名',
            align: "center"
        }, {
            field: 'custRegion',
            title: '客户地区',
            align: "center"
        },
        {
            field: 'custManangerName',
            title: '客户经理姓名',
            align: "center"
        },
        {
            field: 'custLevel',
            title: '客户等级',
            align: "center",
            formatter: function (value,
                                 row, index) {
                if (row.custLevel==1){
                    return "新客"
                }else if (row.custLevel==2){
                    return "熟客"
                }else if (row.custLevel==3){
                    return "老客"
                }else if (row.custLevel==4){
                    return "会员"
                }else if (row.custLevel==5){
                    return "大会员"
                }
            }
        },
        // {
        //     field: 'custLevelLabel',
        //     title: '客户等级描述',
        //     align: "center"
        // },
        {
            field: 'custAddress',
            title: '客户地址',
            align: "center"
        },
        {
            field: 'custTel',
            title: '客户电话',
            align: "center"
        },
        {
            field: 'custOrderNum',
            title: '订单',
            align: "center",
            formatter: function (value,
                                 row, index) {
                if (row.custOrderNum>0){
                    return "有订单"
                }else {
                    return "无订单"
                }
            }
        },
        {
            field: 'custSatisfy',
            title: '客户满意度',
            align: "center"
        },
        {
            field: 'custCredit',
            title: '客户信用度',
            align: "center"
        },
        {
            field: 'custStatus',
            title: '客户状态',
            align: "center"
        },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value,
                                 row, index) {
                var edit = editFlag == "true" ? '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser(' + row.custId + ')">编辑</a>' : '';
                // var assign = assignRoleFlag=="true"  ? '<a class="table-btn table-btn-info"  href="javascript:void(0)" onclick="assignRoleList('+row.customerId+')">分配角色</a>':'';
                var del = deleteFlag == "true" ? '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser(' + row.custId + ')">删除</a>' : '';
                return edit + del;
            }
        }];
    var options = {
        id: "#table",
        url: '/customer2/list',
        columns: columns,
        // toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);

    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            custName: $("#custName").val(),
            custLevel: $("#custLevel").val(),
            custStatus: $("#custStatus").val()
        };
        return temp;
    }

    /*查询角色参数*/
    function queryRoleParams(params) {
        var temp = {
            custId: customerIdChecked
        };
        return temp;
    }

    /*编辑*/
    function editUser(custId) {
        Core.load("#userOpenWindow", "/customer2/edit?custId=" + custId, function () {
            $("#userDetailModal").modal("show");
        }, 2);
    }

    /*删除*/
    function deleteUser(custId) {
        Core.confirm("确定删除该用户？", function () {
            Core.postAjax("/customer2/delete", {"custId": custId}, function (data) {
                if (data.status == 200) {
                    Core.refreshTable("#table");
                    layer.msg(data.msg);
                }else{
                    layer.msg(data.msg);
                }
            }, "get")
        })
    }

    $(function () {
        /*查询*/
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        //
    });
    //增加
    $("#btn_add").click(function () {
        Core.clearError("#CustomerForm");
    });
    /*批量删除*/
    $("#btn_batch_delete").click(function () {
        var checkedRows = Core.selectMutiData("#table");
        if (checkedRows) {
            Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                custIdStr = "";
                $.each(checkedRows, function (i, item) {
                    custIdStr += (item.custId + ",");
                })
                custIdStr = custIdStr.substring(0, custIdStr.length - 1);
                Core.postAjax("/customer2/batch/delete", {"custIdStr": custIdStr}, function (data) {
                    if (data.status == 200) {
                        Core.refreshTable("#table");
                        layer.msg(data.msg);
                    }else{
                        layer.msg(data.msg);
                    }
                }, "get")
            })
        }
    });


    /*保存用戶*/
    $("#saveCustomer").click(function () {
        if (doValidForm(CustomerForm)) {
            Core.mask("#saveCustomer");
            Core.postAjax("/customer2/add", $("#CustomerForm").serialize(), function (data) {
                Core.unmask("#saveCustomer");
                if (data.status == 200) {
                    $("#userModal").modal("hide");
                    $("#CustomerForm")[0].reset();
                    Core.refreshTable("#table")
                }
                layer.msg(data.msg);
            })
        };
    });
</script>